<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase"></pure-tabs>
			</pj-demo>

			<!-- 贴边吸附 -->
			<pj-demo title="贴边吸附">
				<pure-tabs :list="items" :current="currentSticky" @onClick="onClickSticky" sticky></pure-tabs>
			</pj-demo>

			<!-- 滚动可视 -->
			<pj-demo title="滚动可视" desc="只将激活项滚动到可视区域">
				<pure-tabs :list="items" :current="currentVisible" @onClick="onClickVisible" visible></pure-tabs>
			</pj-demo>

			<!-- 禁止滚动 -->
			<pj-demo title="禁止滚动">
				<pure-tabs :list="items" :current="currentDisabled" @onClick="onClickDisabled" disabled></pure-tabs>
			</pj-demo>

			<!-- 等分布局 -->
			<pj-demo title="等分布局">
				<pure-tabs :list="items.slice(0, 5)" :current="currentEqual" @onClick="onClickEqual" equal></pure-tabs>
			</pj-demo>

			<!-- 两端对齐 -->
			<pj-demo title="两端对齐">
				<pure-tabs :list="items.slice(0, 5)" :current="currentJustify" @onClick="onClickJustify" justify></pure-tabs>
			</pj-demo>

			<!-- 自定义指示器 -->
			<pj-demo title="自定义指示器">
				<pure-tabs :list="items" :current="currentIndicator" @onClick="onClickIndicator" :show-bar="false">
					<template #indicator="{ activated }">
						<image class="indicator" :class="activated ? 'active' : ''" src="/static/images/a_002.png" mode="widthFix" style="width: 1em" />
					</template>
				</pure-tabs>
			</pj-demo>

			<!-- 禁用标签项 -->
			<pj-demo title="禁用标签项">
				<pure-tabs :list="items1" :current="currentItemDisabled" @onClick="onClickItemDisabled"> </pure-tabs>
			</pj-demo>

			<!-- 纵向布局 -->
			<pj-demo title="纵向布局">
				<view class="vertical">
					<pure-tabs :list="items" :current="currentVertical" @onClick="onClickVertical" vertical></pure-tabs>
				</view>
			</pj-demo>

			<!-- 主题模式 -->
			<pj-demo title="主题模式">
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" theme="primary"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" theme="success"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" theme="warning"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" theme="danger"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" theme="info"></pure-tabs>
			</pj-demo>

			<!-- 幽灵样式 -->
			<pj-demo title="幽灵样式">
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" ghost theme="primary"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" ghost theme="success"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" ghost theme="warning"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" ghost theme="danger"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" ghost theme="info"></pure-tabs>
			</pj-demo>

			<!-- 镂空样式 -->
			<pj-demo title="镂空样式">
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" plain theme="primary"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" plain theme="success"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" plain theme="warning"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" plain theme="danger"></pure-tabs>
				<pure-gap></pure-gap>
				<pure-tabs :list="items" :current="currentBase" @onClick="onClickBase" plain theme="info"></pure-tabs>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
import { ref } from "vue";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
const items = ref([
	{
		label: "日常",
		value: "1",
	},
	{
		label: "水果",
		value: "2",
	},
	{
		label: "家电",
		value: "3",
	},
	{
		label: "电脑",
		value: "4",
	},
	{
		label: "手机",
		value: "5",
	},
	{
		label: "食物",
		value: "6",
	},
	{
		label: "酒水",
		value: "7",
	},
	{
		label: "家具",
		value: "8",
	},
	{
		label: "读物",
		value: "9",
	},
	{
		label: "其他",
		value: "10",
	},
]);
const items1 = ref([
	{
		label: "日常",
		value: "1",
	},
	{
		label: "水果",
		value: "2",
	},
	{
		label: "家电",
		value: "3",
		disabled: true,
	},
	{
		label: "电脑",
		value: "4",
	},
	{
		label: "手机",
		value: "5",
		disabled: true,
	},
	{
		label: "食物",
		value: "6",
	},
	{
		label: "酒水",
		value: "7",
		disabled: true,
	},
	{
		label: "家具",
		value: "8",
	},
	{
		label: "读物",
		value: "9",
	},
	{
		label: "其他",
		value: "10",
	},
]);
const currentBase = ref(0);
const currentSticky = ref(0);
const currentVisible = ref(0);
const currentDisabled = ref(0);
const currentEqual = ref(0);
const currentJustify = ref(0);
const currentIndicator = ref(0);
const currentItemDisabled = ref(0);
const currentVertical = ref(0);

// **************************************************************************************************************
// * Computeds
// **************************************************************************************************************

// **************************************************************************************************************
// * Watches
// **************************************************************************************************************

// **************************************************************************************************************
// * 生命周期
// **************************************************************************************************************

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 切换事件
function onClickBase(index, item) {
	currentBase.value = index;
}

// 切换事件
function onClickSticky(index, item) {
	currentSticky.value = index;
}

// 切换事件
function onClickVisible(index, item) {
	currentVisible.value = index;
}

// 切换事件
function onClickDisabled(index, item) {
	currentDisabled.value = index;
}

// 切换事件
function onClickEqual(index, item) {
	currentEqual.value = index;
}

// 切换事件
function onClickJustify(index, item) {
	currentJustify.value = index;
}

// 切换事件
function onClickIndicator(index, item) {
	currentIndicator.value = index;
}

// 切换事件
function onClickItemDisabled(index, item) {
	currentItemDisabled.value = index;
}

// 切换事件
function onClickVertical(index, item) {
	currentVertical.value = index;
}
</script>

<style lang="scss" scoped>
.page {
	.indicator {
		width: 1em;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 100%) scale(0);
		opacity: 0;
		transition: all 0.3s ease-in-out;

		&.active {
			transform: translate(-50%, 0) scale(1);
			opacity: 1;
		}
	}

	.bar {
		width: 1em;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%);
	}

	.vertical {
		width: 100px;
		height: 300px;
	}
}
</style>
